<template>
  <div class="app-container">
    <template v-if="showOrderPage == true">
      <div class="search-bar">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="业主名">
            <el-input v-model="queryParams.keywords" placeholder="请输入业主名称" />
          </el-form-item>
          <el-form-item label="代金券券码">
            <el-input v-model="queryParams.coupon" placeholder="请输入券码" />
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="tempTime"
              :editable="false"
              type="datetimerange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="queryParams.statuses"
              placeholder="请选择"
              style="width: 200px"
              clearable
            >
              <el-option
                v-for="item in COUPON_STATUS_ARR"
                :key="item.id"
                :label="item.label"
                :value="item.id"
                style="width: 200px"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <template #icon>
                <Search />
              </template>
              搜索
            </el-button>
            <el-button @click="handleResetQuery">
              <template #icon>
                <Refresh />
              </template>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <BasePageTable
        :table-data="tableData"
        :table-columns-data="tableColumnsData"
        :total="total"
        :loading="loading"
        :page-num="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        @handleQuery="changePage"
      >
        <template #index="scope">
          {{ scope.index + 1 }}
        </template>
        <template #status="{ row, name }">
          <el-tag :type="tagStatus[row.status]">{{ COUPON_STATUS[row.status] }}</el-tag>
        </template>
        <template #couponCode="{ row }">
          {{ showCodeList(row.coupons) }}
        </template>
        <template #operation="{ row, name }">
          <el-button
            link
            type="primary"
            icon="Edit"
            :disabled="row.status != 2"
            @click="handleEdit(row, 'handle')"
          >
            处理
          </el-button>
          <el-button link type="primary" @click="handleEdit(row, 'look')">查看详情</el-button>
        </template>
      </BasePageTable>
    </template>
    <template v-else>
      <orderFrom @backTo="orderBackTo" :orderData="orderInfo" :type="fromType"></orderFrom>
    </template>
  </div>
</template>
<script setup>
import listApi from "@/api/coupon/couponList";
import { COUPON_STATUS_ARR, COUPON_STATUS } from "@/enums/coupon/coupon";
import orderFrom from "../components/orderForm/index.vue";

const queryParams = reactive({
  keywords: null,
  coupon: "",
  statuses: "",
  pageNum: 1,
  pageSize: 10,
  settleApplyBeginTime: "",
  settleApplyEndTime: "",
});
const tagStatus = ref({
  1: "info",
  2: "info",
  3: "success",
  4: "warning",
  5: "success",
});
const total = ref(0);
const dateRangeRef = ref(null);
const tableData = ref([]);
const loading = ref(false);
const showOrderPage = ref(true);
const orderInfo = ref({});
const fromType = ref("handle");
const tempTime = ref({});
const tableColumnsData = ref([
  {
    label: "序号",
    prop: "index",
    align: "center",
    width: 60,
    customSlot: "index",
  },
  {
    prop: "houseNeighborhood",
    label: "小区信息",
    showOverflowTooltip: true,
  },
  {
    prop: "houseNumber",
    label: "门牌号",
    showOverflowTooltip: true,
  },
  {
    prop: "ownName",
    label: "业主名",
    showOverflowTooltip: true,
  },
  {
    prop: "houseNeighborhood",
    label: "房屋信息",
    showOverflowTooltip: true,
  },

  {
    prop: "linkContractTime",
    label: "签约时间",
    showOverflowTooltip: true,
  },
  {
    prop: "categoryName",
    label: "品类",
    showOverflowTooltip: true,
  },
  {
    prop: "couponCode",
    label: "代金券券码",
    showOverflowTooltip: true,
    customSlot: "couponCode",
  },
  {
    prop: "totalCoins",
    label: "核销总积分",
    showOverflowTooltip: true,
  },

  {
    prop: "status",
    label: "状态",
    showOverflowTooltip: true,
    customSlot: "status", // 自定义插槽名称
  },
  {
    prop: "operationStartTime",
    label: "开工时间",
    showOverflowTooltip: true,
  },
  {
    prop: "settleApplyTime",
    label: "申请时间",
    showOverflowTooltip: true,
  },
  // {
  //   prop: "file",
  //   label: "成果展示",
  //   showOverflowTooltip: true,
  // },
  {
    prop: "operation",
    label: "操作",
    width: 150,
    align: "center",
    fixed: "right",
    customSlot: "operation", // 自定义插槽名称
  },
]);

function showCodeList(data) {
  if (data) {
    let names = data.map((item) => item.couponCode);
    return names.join(",");
  } else {
    return "";
  }
}
function handleChange(val) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.settleApplyBeginTime = startTime;
    queryParams.settleApplyEndTime = endTime;
  } else {
    queryParams.settleApplyBeginTime = "";
    queryParams.settleApplyEndTime = "";
  }
}
function handleEdit(val, type) {
  fromType.value = type;
  loading.value = true;
  listApi
    .orderDetail(val.id)
    .then((res) => {
      orderInfo.value = res;
      console.log(orderInfo.value.status);
      orderInfo.value.statusName = COUPON_STATUS[orderInfo.value.status];
      showOrderPage.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
}
function orderBackTo() {
  showOrderPage.value = true;
  getList();
}
function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}
function getList() {
  loading.value = true;
  listApi
    .orderList(queryParams)
    .then((data) => {
      tableData.value = data.list || [];
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
function changePage(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  getList();
}
// 重置查询
function handleResetQuery() {
  queryParams.pageNum = 1;
  queryParams.statuses = "";
  queryParams.keywords = "";
  queryParams.coupon = "";
  queryParams.settleApplyEndTime = "";
  queryParams.settleApplyBeginTime = "";
  tempTime.value = "";
  getList();
}
onMounted(async () => {
  getList();
});
</script>
